<!DOCTYPE html>
<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8"%>
<%@include file="../../common/include/inc.jsp" %>
<head lang="en">
    <title>首页</title>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/pub-ui/css/default.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ace/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/css/bootstrap.css"/>
    <link rel="stylesheet" href="${ctx}/resource/plugins/ued/css/page-styles.css"/>
</head>
<style>
    .table th, .table td {
        text-align: center;
        vertical-align: middle!important;
    }
    .table-bordered th,
    .table-bordered td {
        border: 1px solid #2e75b6 !important;
    }
</style>
<body style="overflow: hidden;min-width: 1703px">
<!--主要内容 begin-->
<div class="content c-width pd-5 pdt-0 " >
    <ul class="clearfix section-1">

        <li class="item-1" style="width: 25%;">
            <div class="bd-grey item-2-map mgt-5" style="height: 430px;" >
                <div style="margin-top: 10px" id="push">
                    <span style='font-size: 20px;margin-right: 75%;color: #29F7FF'>资源总览</span>
                </div>
                <div style=" margin-top: 5%;margin-left: 5%;width: 30%;float: left">
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF'>资源在运数</span>
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF' id="zy"></span>

                </div>
                <div style=" margin-top: 5%;margin-left: 5%;width: 30%;float: left">
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF'>资源剩余数</span>
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF' id="sy"></span>

                </div>
                <div style=" margin-top: 5%;margin-left: 5%;width: 20%;float: left">
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF'>总数量</span>
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF' id="zs"></span>
                </div>
                <div>
                <table class="table table-bordered" style="width: 398px;margin: 20px 10px;height: 300px">
                        <thead>
                        <tr>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">资源分类</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">在运</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">剩余</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">总数量</font></th>
                        </tr>
                        </thead>
                        <tbody id="info">

                        </tbody>
                    </table>
                </div>
            </div>

        </li>

        <li class="item-2 mgl-10 mgr-10" style="width: 40%;">
            <%--资源消费概览--%>
                <div class="bd-grey item-2-map mgt-5" style="height: 430px;">
                    <div style="margin-top: 10px" >
                        <span style='font-size: 20px;margin-right: 82%;color: #000000'>资源使用率</span>
                    </div>
                    <div style="height: 50%;" >
                        <div style="width: 50%;height: 100%;float: left" id="left_top_echart1"></div>
                        <div style="width: 50%;height: 100%;float: left" id="left_top_echart2"></div>
                    </div>
                    <div style="height: 50%;">
                        <div style="width: 33%;height: 100%;float: left" id="left_top_echart3"></div>
                        <div style="width: 33%;height: 100%;float: left" id="left_top_echart4"></div>
                        <div style="width: 33%;height: 100%;float: left" id="left_top_echart5"></div>

                    </div>
                </div>
            <%--资源消费概览--%>
        </li>

        <li class="item-3" style="width: 33%;">
            <%--资源总览--%>
            <div class="bd-grey item-2-map mgt-5" style="height: 430px;" >
                <div style="margin-top: 10px" >
                    <span style='font-size: 20px;margin-left: 90%;color: #29F7FF'>更多</span>
                </div>
                <div id="top_right_echart" style="height: 98%;width: 98%">

                </div>
            </div>
        </li>
        </ul>
    <ul class="clearfix section-1">

        <li class="item-1" style="width: 25%;">
            <div class="bd-grey item-2-map mgt-5" style="height: 430px;" >
                <div style="margin-top: 10px" >
                    <span style='font-size: 20px;margin-right: 65%;color: #29F7FF'>虚拟资源概览</span>
                </div>
                <div style=" margin-top: 5%;margin-left: 5%;width: 30%;float: left">
                    <span style='font-size: 20px;margin-right: 20%;color: #29F7FF'>在运数</span>
                    <span style='font-size: 20px;margin-right: 20%;color: #29F7FF' id="rzy"></span>

                </div>
                <div style=" margin-top: 5%;margin-left: 5%;width: 30%;float: left">
                    <span style='font-size: 20px;margin-right: 20%;color: #29F7FF'>剩余数</span>
                    <span style='font-size: 20px;margin-right: 20%;color: #29F7FF' id="rsy"></span>

                </div>
                <div style=" margin-top: 5%;margin-left: 5%;width: 20%;float: left">
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF'>总数量</span>
                    <span style='font-size: 20px;margin-right: 12%;color: #29F7FF' id="rzs"></span>
                </div>
                <div>
                    <table class="table table-bordered" style="width: 398px;margin: 20px 10px;height: 300px">
                        <thead>
                        <tr>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">资源分类</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">在运</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">剩余</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">总数量</font></th>
                        </tr>
                        </thead>
                        <tbody id="tb3">

                        </tbody>
                    </table>
                </div>
            </div>

        </li>

        <li class="item-2 mgl-10 mgr-10" style="width: 24%;">
            <%--资源消费概览--%>
            <div class="bd-grey item-2-map mgt-5" style="height: 430px;">
                <div id="center_echart" style="height: 98%;width: 98%">

                </div>
            </div>
            <%--资源消费概览--%>
        </li>
        <li class="item-3" style="width: 24%;">
            <%--资源消费概览--%>
            <div class="bd-grey item-2-map mgt-5" style="height: 430px;">
                <div id="center1_echart" style="height: 98%;width: 98%">

                </div>
            </div>
            <%--资源消费概览--%>
        </li>

        <li class="item-3" style="width: 25%;margin-left: 10px">
            <%--资源总览--%>
            <div class="bd-grey item-2-map mgt-5" style="height: 430px;" >
                <div id="center_right_echart" style="height: 98%;width: 98%">

                </div>
            </div>
        </li>
    </ul>

    <ul class="clearfix section-1">

        <li class="item-1" style="width: 34%;">
            <div class="bd-grey item-2-map mgt-5" style="height: 500px;" >
                <div style="margin-top: 10px">
                    <span style='font-size: 20px;margin-right: 75%;color: #29F7FF'>机房概览</span>
                </div>
                <div>
                    <table class="table table-bordered" style="width: 96%;margin: 20px 10px;height: 300px">
                        <thead>
                        <tr>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">机房名称</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">机房年份</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">机房面积(m²)</font></th>
                            <th bgcolor="#282c2d"><font color="#A8CFDB">机房位置</font></th>
                        </tr>
                        </thead>
                        <tbody id="tb2">

                        </tbody>
                    </table>
                </div>
            </div>

        </li>

        <li class="item-2 mgl-10 mgr-10" style="width: 64%; height: auto">
            <%--资源消费概览--%>
            <div class="bd-grey item-2-map mgt-5" style="height: 500px;">
                <div style="margin-top: 10px" >
                    <span style='font-size: 20px;margin-right: 87%;color: #29F7FF'>机房分布视图</span>
                </div>
                <div id="map_echart" style="height: 98%;width: 98%"></div>
            </div>
            <%--资源消费概览--%>
        </li>

        <li class="item-3" style="width: 98.6%;height: auto">
            <%--资源总览--%>
            <div class="bd-grey item-2-map mgt-5" style="height: 740px;" >
                <div style="margin-top: 10px" >
                    <span style='font-size: 20px;margin-right: 88%;color: #29F7FF'>机房资源视图</span>
                    <span style='font-size: 20px;;color: #29F7FF'>更多</span>
                </div>
                <div id="computerRoom" style="height: 98%;width: 98%">

                </div>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript" src="${ctx}/resource/plugins/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/echarts4/esl.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/ued/js/circle-progress.js"></script>
<script type="text/javascript" src="${ctx}/resource/plugins/ued/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/resource/resource/resource/resourceView.js"></script>

</body>
</html>
